<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .wrapper{
            position: absolute;
            width: 400px;
            height: 30px;
            transform: rotate(90deg);
            left: calc(50% - 250px);
            top: calc(50% - 15px);
        }
        .pointer{
            display: flex;
            justify-content: space-around;
            background-color: blue;
            width: 400px;
            height: 30px;
            transform: rotate(0deg);
        }
        .pointer span{
            color: white;
            font-size: 30px;
            transform: rotate(90deg);
        }
    </style>
<body>
    <div id="demo"></div>
    <input type="text" id="input">
    <div class="wrapper">
        <div class="pointer">
            <span>N</span>
            <span>S</span>
        </div>
    </div>
    <script>
        var pointer = document.getElementsByClassName('pointer')[0];
        input.oninput = function(e){
            console.log(e.target.value)
            pointer.style.transform = `rotate(${e.target.value}deg)`
        }
        window.addEventListener('deviceorientation', function (event) {
            pointer.style.transform = `rotate(${event.alpha}deg)`
            demo.innerHTML=`
            <div>alpha:${event.alpha}</div>
            <div>beta:${event.beta}</div>
            <div>gamma:${event.gamma}</div>
            `
        })
    </script>
</body>

</html>